<template>
  <div class="task-container">
    <!-- 搜索区域 -->
    <ContentWrap class="search-wrapper">
      <!-- 搜索头部 -->
      <div class="search-header">
        <div class="header-icon">
          <Icon icon="ep:list" />
        </div>
        <div class="header-content">
          <h3 class="search-title">外呼任务管理</h3>
          <p class="search-subtitle">管理和监控所有外呼任务</p>
        </div>
      </div>

      <!-- 搜索表单 -->
      <div class="search-form-wrapper">
        <el-form
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
          class="enhanced-search-form"
        >
          <div class="form-grid">
            <el-form-item label="任务名称" prop="name" class="form-item">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入任务名称"
                clearable
                @keyup.enter="handleQuery"
                class="enhanced-input"
              >
                <template #prefix>
                  <Icon icon="ep:document" />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="任务状态" prop="status" class="form-item">
              <el-select
                v-model="queryParams.status"
                placeholder="请选择任务状态"
                clearable
                class="enhanced-select"
              >
                <template #prefix>
                  <Icon icon="ep:flag" />
                </template>
                <el-option v-for="(v, k) in CallTaskstatusEnumMap" :key="k" :label="v" :value="k" />
              </el-select>
            </el-form-item>

            <el-form-item label="创建时间" prop="createTime" class="form-item">
              <el-date-picker
                v-model="queryParams.createTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                class="enhanced-date-picker"
              />
            </el-form-item>
          </div>

          <div class="form-actions">
            <div class="action-group primary-actions">
              <el-button @click="handleQuery" class="search-btn">
                <Icon icon="ep:search" class="btn-icon" />
                搜索
              </el-button>
              <el-button @click="resetQuery" class="reset-btn">
                <Icon icon="ep:refresh" class="btn-icon" />
                重置
              </el-button>
            </div>
            <div class="action-group secondary-actions">
              <el-button
                type="primary"
                @click="openForm('create')"
                v-hasPermi="['call:task:create']"
                class="create-btn"
              >
                <Icon icon="ep:plus" class="btn-icon" />
                新增
              </el-button>
              <el-button
                type="success"
                @click="handleExport"
                :loading="exportLoading"
                v-hasPermi="['call:task:export']"
                class="!ml-0"
                style="border-radius: 6px"
              >
                <Icon icon="ep:download" class="btn-icon" />
                导出
              </el-button>
              <el-button type="primary" @click="showCallPage" class="call-list-btn !ml-0">
                <Icon icon="ep:tickets" class="btn-icon" />
                呼叫名单
              </el-button>
              <el-button type="primary" @click="showVoiceFile" class="voice-btn !ml-0">
                <Icon icon="ep:microphone" class="btn-icon" />
                语音文件管理
              </el-button>
            </div>
          </div>
        </el-form>
      </div>
    </ContentWrap>

    <!-- 列表区域 -->
    <ContentWrap class="table-wrapper">
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          border
          class="enhanced-table"
        >
          <el-table-column label="任务名称" align="center" prop="name" width="150px">
            <template #default="scope">
              <div class="task-name">
                <Icon icon="ep:document" class="task-icon" />
                <el-link
                  :underline="false"
                  type="primary"
                  @click="goDetail(scope.row.id)"
                  class="task-link"
                >
                  {{ scope.row.name }}
                </el-link>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="任务类型" align="center" prop="type" width="110px">
            <template #default="scope">
              <el-tag :type="scope.row.type === 1 ? 'primary' : 'success'" class="type-tag">
                {{ CallTypeEnumMap[scope.row.type] }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="并发模式" align="left" width="150px">
            <template #default="scope">
              <div class="concurrent-info">
                <div class="concurrent-item" v-if="scope.row.type == 1">
                  <Icon icon="ep:connection" class="concurrent-icon" />
                  <span class="concurrent-label">并发倍率:</span>
                  <span class="concurrent-value">{{ scope.row.multiplier }}</span>
                </div>
                <div class="concurrent-item">
                  <Icon icon="ep:cpu" class="concurrent-icon" />
                  <span class="concurrent-label">最高并发:</span>
                  <span class="concurrent-value">{{ scope.row.maxNum }}</span>
                </div>
                <el-button
                  link
                  type="primary"
                  @click="editCurr(scope.row)"
                  class="edit-concurrent-btn"
                >
                  <Icon icon="ep:edit" />
                </el-button>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="号码量" align="center" prop="numberCount" width="100px">
            <template #default="scope">
              <div class="number-count">
                <Icon icon="ep:phone" class="count-icon" />
                <span class="count-value">{{ scope.row.numberCount }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="已呼数量" align="center" prop="callCount" width="100px">
            <template #default="scope">
              <div class="call-count">
                <Icon icon="ep:phone-filled" class="count-icon" />
                <span class="count-value">{{ scope.row.callCount }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="任务状态" align="center" prop="status" width="100px">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)" class="status-tag">
                <Icon :icon="getStatusIcon(scope.row.status)" class="status-icon" />
                {{ CallTaskstatusEnumMap[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            label="开始时间"
            align="center"
            prop="startTime"
            :formatter="dateFormatter"
            width="170px"
          />

          <el-table-column
            label="结束时间"
            align="center"
            prop="endTime"
            :formatter="dateFormatter"
            width="170px"
          />

          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="170px"
          />

          <el-table-column align="center" prop="prop" label="执行日期1" min-width="120">
            <template #default="scope">
              <div class="schedule-info">
                <div class="schedule-days">
                  <Icon icon="ep:calendar" class="schedule-icon" />
                  <span class="days-text">
                    {{
                      weekOption
                        .filter((option) => scope.row.weekday1?.includes(option.value))
                        .map((item) => item.label)
                        .join(',')
                    }}
                  </span>
                </div>
                <div class="schedule-time">
                  <Icon icon="ep:clock" class="time-icon" />
                  <span class="time-text">{{ scope.row.startTime1 }}</span>
                </div>
                <div class="schedule-time">
                  <Icon icon="ep:clock" class="time-icon" />
                  <span class="time-text">{{ scope.row.endTime1 }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="prop" label="执行日期2" min-width="120">
            <template #default="scope">
              <div class="schedule-info">
                <div class="schedule-days">
                  <Icon icon="ep:calendar" class="schedule-icon" />
                  <span class="days-text">
                    {{
                      weekOption
                        .filter((option) => scope.row.weekday2?.includes(option.value))
                        .map((item) => item.label)
                        .join(',')
                    }}
                  </span>
                </div>
                <div class="schedule-time">
                  <Icon icon="ep:clock" class="time-icon" />
                  <span class="time-text">{{ scope.row.startTime2 }}</span>
                </div>
                <div class="schedule-time">
                  <Icon icon="ep:clock" class="time-icon" />
                  <span class="time-text">{{ scope.row.endTime2 }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="prop" label="执行日期3" min-width="120">
            <template #default="scope">
              <div class="schedule-info">
                <div class="schedule-days">
                  <Icon icon="ep:calendar" class="schedule-icon" />
                  <span class="days-text">
                    {{
                      weekOption
                        .filter((option) => scope.row.weekday3?.includes(option.value))
                        .map((item) => item.label)
                        .join(',')
                    }}
                  </span>
                </div>
                <div class="schedule-time">
                  <Icon icon="ep:clock" class="time-icon" />
                  <span class="time-text">{{ scope.row.startTime3 }}</span>
                </div>
                <div class="schedule-time">
                  <Icon icon="ep:clock" class="time-icon" />
                  <span class="time-text">{{ scope.row.endTime3 }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="400px" fixed="right">
            <template #default="scope">
              <div class="flex">
                <el-button
                  link
                  :type="scope.row.status == 9 ? 'danger' : 'success'"
                  @click="controlTask(scope.row)"
                  v-hasPermi="['call:task:update']"
                  class="action-btn control-btn"
                >
                  <Icon
                    :icon="scope.row.status == 9 ? 'ep:video-pause' : 'ep:video-play'"
                    class="btn-icon"
                  />
                  {{ scope.row.status == 9 ? '停止' : '启动' }}
                </el-button>
                <el-button type="primary" link @click="goDetail(scope.row.id)" class="action-btn">
                  <Icon icon="ep:view" class="btn-icon" />
                  详情
                </el-button>
                <el-button type="success" link @click="appendPhone(scope.row)" class="action-btn">
                  <Icon icon="ep:plus" class="btn-icon" />
                  追加
                </el-button>
                <el-button type="warning" link @click="taskHeavy(scope.row.id)" class="action-btn">
                  <Icon icon="ep:refresh" class="btn-icon" />
                  任务重呼
                </el-button>
                <el-button
                  link
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  v-hasPermi="['call:task:delete']"
                  class="action-btn"
                >
                  <Icon icon="ep:delete" class="btn-icon" />
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </ContentWrap>

    <!-- 表单弹窗：添加/修改 -->
    <TaskForm ref="formRef" @success="getList" />
    <!-- 呼叫名单 -->
    <CallList ref="callRefs" />
    <!-- 语音文件管理 -->
    <VoiceFileManagement ref="voiceRefs" />
    <!-- 追加外呼号码 -->
    <AppendTask ref="appendRefs" @success="getList" />
    <!-- 编辑并发 -->
    <Concurrent ref="concurrRefs" @success="getList" />
    <!-- 任务重呼 -->
    <HeavyTask ref="heavyRefs" @success="getList" />
  </div>
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
import download from '@/utils/download'
import * as TaskApi from '@/api/call/task'
import { dateFormatter } from '@/utils/formatTime'
import TaskForm from './TaskForm2.vue'
import CallList from './callList/index.vue'
import VoiceFileManagement from './voiceFile/index.vue'
import AppendTask from './append.vue'
import Concurrent from './concurr.vue'
import HeavyTask from './heavyTask/index2.vue'

defineOptions({ name: 'CallTask' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null,
  type: 1,
  status: null,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const CallTypeEnumMap = {
  1: '群呼转坐席',
  2: 'AI外呼'
}
const concurrOption = {
  0: '智能',
  1: '固定'
}
const CallTaskstatusEnumMap = {
  0: '执行完毕',
  1: '等待执行',
  2: '执行错误',
  3: '暂停',
  4: '手动停止',
  9: '执行中'
}
const weekOption = [
  {
    label: '星期一',
    value: '1'
  },
  {
    label: '星期二',
    value: '2'
  },
  {
    label: '星期三',
    value: '3'
  },
  {
    label: '星期四',
    value: '4'
  },
  {
    label: '星期五',
    value: '5'
  },
  {
    label: '星期六',
    value: '6'
  },
  {
    label: '星期日',
    value: '0'
  }
]

// 获取状态标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case 0:
      return 'success' // 执行完毕
    case 1:
      return 'info' // 等待执行
    case 2:
      return 'danger' // 执行错误
    case 3:
      return 'warning' // 暂停
    case 4:
      return 'info' // 手动停止
    case 9:
      return 'success' // 执行中
    default:
      return 'info'
  }
}

// 获取状态图标
const getStatusIcon = (status) => {
  switch (status) {
    case 0:
      return 'ep:check' // 执行完毕
    case 1:
      return 'ep:clock' // 等待执行
    case 2:
      return 'ep:close' // 执行错误
    case 3:
      return 'ep:video-pause' // 暂停
    case 4:
      return 'ep:switch-button' // 手动停止
    case 9:
      return 'ep:loading' // 执行中
    default:
      return 'ep:info-filled'
  }
}

const concurrRefs = ref(null)
/*编辑并发模式*/
const editCurr = (item) => {
  formRef.value.open('update', item.id)
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await TaskApi.getTaskPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 启动/停止操作 */
const controlTask = async (row) => {
  const data = {
    id: row.id,
    action: row.status == 9 ? 'stop' : 'start'
  }
  await TaskApi.controlTask(data)
  if (data.action == 'start') {
    message.success('操作成功，请通知坐席进入呼叫中心并登录话机')
  } else {
    message.success('操作成功')
  }

  // 刷新列表
  await getList()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await TaskApi.deleteTask(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await TaskApi.exportTask(queryParams)
    download.excel(data, '外呼任务.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
const { push } = useRouter()
/** 打开详情 */
const goDetail = (id) => {
  push('/task/taskDetail?id=' + id)
}
const appendRefs = ref(null)
/*追加*/
const appendPhone = (item) => {
  appendRefs.value.open(item.taskId)
}
const heavyRefs = ref(null)
/*任务重呼*/
const taskHeavy = (id) => {
  heavyRefs.value.open(id)
}
const callRefs = ref(null)
/*显示呼叫名单*/
const showCallPage = () => {
  callRefs.value.open()
}
/*显示语音文件*/
const voiceRefs = ref(null)
const showVoiceFile = () => {
  voiceRefs.value.open()
}
/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.task-container {
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

/* 搜索区域样式 */
.search-wrapper {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
}

.search-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  border-radius: 10px;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.search-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.search-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.search-form-wrapper {
  background: white;
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.enhanced-search-form {
  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }
  }

  .form-item {
    margin-bottom: 0;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #374151;
    }
  }
}

.enhanced-input,
.enhanced-select,
.enhanced-date-picker {
  width: 100%;

  :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

.form-actions {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 12px;
  }
}

.action-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    width: 100%;
    justify-content: center;
  }
}

.primary-actions {
  @media (max-width: 768px) {
    order: 1;
  }
}

.secondary-actions {
  @media (max-width: 768px) {
    order: 2;
    flex-direction: column;
    width: 100%;
  }
}

.search-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  color: white;

  @media (max-width: 768px) {
    width: 100px;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.reset-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    width: 100px;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.create-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 500;

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.export-btn {
  border: 2px solid #10b981;
  color: #10b981;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 500;

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.call-list-btn,
.voice-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 500;

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 表格区域样式 */
.table-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
}

.table-container {
  background: white;
  overflow-x: auto;
}

.enhanced-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
    }
  }

  :deep(.el-table__row) {
    &:hover {
      background: rgba(0, 82, 204, 0.02) !important;
    }
  }

  :deep(.el-table__cell) {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
  }
}

/* 表格内容样式 */
.task-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-icon {
  color: #0052cc;
  font-size: 16px;
  flex-shrink: 0;
}

.task-link {
  font-weight: 500;
  font-size: 14px;
}

.type-tag {
  font-weight: 500;
  font-size: 12px;
}

.concurrent-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.concurrent-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.concurrent-icon {
  color: #6b7280;
  font-size: 12px;
  flex-shrink: 0;
}

.concurrent-label {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}

.concurrent-value {
  color: #1f2937;
  font-weight: 600;
}

.edit-concurrent-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px;
  font-size: 14px;
}

.number-count,
.call-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.count-icon {
  color: #6b7280;
  font-size: 14px;
}

.count-value {
  color: #1f2937;
  font-weight: 600;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 12px;

  .status-icon {
    font-size: 12px;
  }
}

.schedule-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.schedule-days {
  display: flex;
  align-items: center;
  gap: 4px;
}

.schedule-icon {
  color: #0052cc;
  font-size: 12px;
  flex-shrink: 0;
}

.days-text {
  color: #1f2937;
  font-weight: 500;
  line-height: 1.2;
}

.schedule-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-icon {
  color: #6b7280;
  font-size: 11px;
  flex-shrink: 0;
}

.time-text {
  color: #6b7280;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;

  @media (max-width: 768px) {
    gap: 6px;
  }
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-width: 60px;
  justify-content: center;

  &:hover {
    background: rgba(0, 82, 204, 0.1);
  }

  .btn-icon {
    font-size: 12px;
  }
}

.control-btn {
  font-weight: 600;
}

.pagination-wrapper {
  padding: 20px 24px;
  background: white;
  border-top: 1px solid #f1f5f9;

  @media (max-width: 768px) {
    padding: 16px;
  }

  :deep(.el-pagination) {
    justify-content: center;

    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .task-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .search-wrapper,
  .table-wrapper {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .search-form-wrapper,
  .table-container,
  .pagination-wrapper {
    background: #374151;
  }

  .search-title {
    color: #f9fafb;
  }

  .concurrent-value,
  .count-value,
  .days-text {
    color: #f9fafb;
  }

  .concurrent-label,
  .concurrent-icon,
  .count-icon,
  .time-text,
  .time-icon {
    color: #d1d5db;
  }

  .enhanced-table {
    :deep(.el-table__header) {
      background: #4b5563;

      th {
        background: #4b5563 !important;
        color: #f9fafb;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
    }
  }
}
</style>
